<template>
    <div class="reg-box">
      <header class="header">
        <van-nav-bar
          right-text="去登录"
          left-arrow
          @click-left="onClickLeft"
          @click-right="onClickRight"
        />
      <h2>唯品会</h2>
      <h4>品牌特卖</h4>
      </header>
      <div class="content">
        <van-form @submit="onSubmit">
          <van-field
            v-model="userName"
            name="userName"
            label="用户名"
            clearable
            placeholder="用户名"
            :right-icon="userTip"
          />
          <van-field
            v-model="tel"
            name="tel"
            label="手机号"
            clearable
            placeholder="手机号"
            @input="telT"
            :right-icon="telTip"
          />
          <van-field
            v-model="code"
            name="code"
            center
            clearable
            label="短信验证码"
            placeholder="请输入短信验证码"
            :right-icon="codeTip"
          >
            <template #button>
              <van-button size="small" type="primary" :disabled="codeflag" @click="send">{{telMsg}}</van-button>
            </template>
          </van-field>
          <van-field
            v-model="passWord"
            type="password"
            name="passWord"
            clearable
            label="密码"
            placeholder="密码"
            :right-icon="passwordTip"
          />
          <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit" :disabled="allTip">
              注册
            </van-button>
          </div>
        </van-form>
      </div>
    </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Form, Field, Button, Toast } from 'vant'
import { sendCode, register } from '../../api/index'

Vue.use(NavBar)
Vue.use(Form)
Vue.use(Field)
Vue.use(Button)
Vue.use(Toast)

export default {
  data () {
    return {
      userName: '',
      tel: '',
      code: '',
      passWord: '',
      codeflag: true,
      telMsg: '发送验证码',
      t: null,
      time: 60
    }
  },
  methods: {
    // 返回上一层
    onClickLeft () {
      this.$router.back()
    },
    // 去登录页面
    onClickRight () {
      this.$router.push('/login')
    },
    onSubmit (val) {
      // 判断注册按钮是否可用，为了解决点击获取验证码时会触发表单提交的bug，如果注册按钮可用(可用状态为false，不可用状态为true)则进行后续代码，不可用直接return掉
      if (this.allTip) {
        return
      }
      const that = this
      register(val).then((res) => {
        // console.log(res.data)
        // 根据注册接口返回的数据，做出相应的提示
        switch (res.data.state) {
          case 201:
            Toast('用户名已被注册')
            break
          case 202:
            Toast('请先获取验证码')
            this.code = ''
            break
          case 203:
            Toast('手机号已被注册')
            break
          case 204:
            Toast('验证码不正确')
            this.code = ''
            break
          case 200:
            Toast({
              message: '注册成功',
              // 注册成功的提示关闭后跳转登录页面
              onClose () {
                that.$router.push('/login')
              }
            })
            break
        }
      })
    },
    // 判断发送验证码的按钮是否可点击,可以写成计算属性
    telT () {
      if (this.telTip === 'success') {
        this.codeflag = false
      } else {
        this.codeflag = true
      }
    },
    send () {
      // 点击获取手机验证码
      sendCode({ tel: this.tel }).then((res) => {
        if (res.data.state === 201) {
          Toast('手机号已被注册')
        } else {
          Toast('发送成功')
        }
        // 点击发送验证码后，开启倒计时功能，并禁用发送按钮
        this.codeflag = true
        // 修改telMsg中的文本为倒计时
        this.telMsg = this.time + 'S后重新发送'
        // 开启倒计时
        this.t = setInterval(() => {
          this.time--
          // 倒计时每减一秒判断倒计时是否结束，结束了就清除计时器
          if (this.time <= 0) {
            // 清除计时器
            clearInterval(this.t)
            // 改变telMsg中的内容
            this.telMsg = '发送验证码'
            // 重新设置time的秒数
            this.time = 60
            // 启用发送按钮
            this.codeflag = false
          }
          this.telMsg = this.time + 'S后重新发送'
        }, 1000)
      })
    }
  },
  computed: {
    userTip () {
      if (/^.{2,12}$/.test(this.userName)) {
        return 'success'
      } else {
        return ''
      }
    },
    telTip () {
      if (/^1[3-9]\d{9}$/.test(this.tel)) {
        return 'success'
      } else {
        return ''
      }
    },
    codeTip () {
      if (/^\d{4}$/.test(this.code)) {
        return 'success'
      } else {
        return ''
      }
    },
    passwordTip () {
      if (/^\w{6,12}$/.test(this.passWord)) {
        return 'success'
      } else {
        return ''
      }
    },
    // 判断注册按钮是否可点击
    allTip () {
      if (this.userTip && this.telTip && this.codeTip && this.passwordTip) {
        return false
      } else {
        return true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.reg-box{
  width:100%;
  height:100%;
  display: flex;
  flex-direction: column;
  .header{
    width:3.75rem;
    height:1.7rem;
    text-align: center;
    h2{
      margin:25px 0 0 0;
      font-size:38px;
      color:#ff0000;
    }
    h4{
      font-size:20px
    }
  }
}
</style>
